<template>
  <div class="cooperation">
    <!-- banner -->
    <personService />
    <!-- 院校合作 -->
    <div class="shcool-box box">
      <div class="h2 flex-lect"><b class="flex1 font20">{{$t('news.schooleHz')}}</b> <router-link to="/cooperation_list?type=0" class="more">{{$t('common.personService.seemore')}}<i class="el-icon-arrow-right"></i></router-link></div>
      <div class="re dataList" v-if="hzSwiperData.show && dataList.length">
        <swiper :options="hzSwiperConfig">
          <swiper-slide class="swiper-slide" v-for="(item,index) in dataList" :key="index">
              <router-link :to="'/cooperation_detail?type=0&list=1&id='+item.id" class="dd cur">
                <div class="imgW"><img :src="imgUrl+(item.logo?item.logo:'')" alt=""></div>
                <div class="con ease flex-ct">
                  <div class="div">
                    <div class="tit font16 ntit">{{item.title}}</div>
                    <div class="np h99 font13" v-html="item.content"></div>
                    <div class="flex-bect more">
                      <span>{{$t('news.detail')}}</span>
                      <span class="font20">⇥</span>
                    </div>
                  </div>
                </div>
              </router-link>
          </swiper-slide>
        </swiper>
        <swiperBtn :swiperData = 'hzSwiperData' />
      </div>
    </div>
    <!-- 企业合作 & 留言合作 -->
    <div class="bgff comapny-box clearfix">
      <div class="box clearfix">
        <!-- 企业合作 -->
        <div class="left">
          <div class="h2 flex-lect"><b class="flex1 font20">{{$t('news.companyHz')}}</b> <router-link to="/cooperation_list?type=1" class="more">{{$t('common.personService.seemore')}}<i class="el-icon-arrow-right"></i></router-link></div>
          <div class="news-list">
            <router-link :to="'/cooperation_detail?type=1&list=1&id='+item.id" class="flex-bect news-item" v-for="(item, index) in companyRecords" :key="index">
              <div class="ntit">{{item.title}}</div>
              <span class="h99">{{item.createTime}}</span>
            </router-link>
          </div>
        </div>
        <!-- 留言合作 -->
        <div class="right">
          <div class="h2 font20">{{$t('news.lmessage')}}</div>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label-width="0" prop="resource">
              <el-radio-group v-model="ruleForm.resource">
                <el-radio :label="1">{{$t('news.userHz')}}</el-radio>
                <el-radio :label="2">{{$t('news.companyHz')}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <div class="clearfix">
              <el-form-item label-width='0' prop="name" style="width:49%;float:left">
                <el-input v-model="ruleForm.name" :placeholder="$t('common.company.name')"></el-input>
              </el-form-item>
              <el-form-item label-width='0' prop="phone" style="width:49%;float:right">
                <el-input v-model="ruleForm.phone" maxlength="11" :placeholder="$t('common.name.tel')"></el-input>
              </el-form-item>
            </div>
            <el-form-item label-width='0' prop="companyName">
              <el-input v-model="ruleForm.companyName" :placeholder="$t('common.company.companyName')"></el-input>
            </el-form-item>
            <el-form-item label-width='0' prop="content" class="textarea">
              <el-input type="textarea" :placeholder="$t('common.company.feedbackDetail')" v-model="ruleForm.content"></el-input>
            </el-form-item>
            <!-- 注：每周最多可提交一次 -->
            <div class="font12 h99">{{$t('news.notes')}}</div>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">{{$t('common.detail.submit')}}</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!-- 入驻企业墙 -->
    <div class="joinCompany-box box">
      <div class="h2 flex-lect"><b class="flex1 font20">{{$t('news.joinCompany')}}</b> <router-link to="/cooperation_list?type=2" class="more">{{$t('common.personService.seemore')}}<i class="el-icon-arrow-right"></i></router-link></div>
      <div class="re rzList" v-if="rzSwiperData.show && dataList.length">
        <swiper :options="hzSwiperConfig">
          <swiper-slide class="swiper-slide" v-for="(item,index) in wallData" :key="index">
              <router-link target="_blank" :to="'/vip/c_recruit_company_detail?type=1&id='+item.erId" class="dd cur flex-lect rd5">
                <img :src="imgUrl + item.logo" />
                <div class="flex1 ntit">{{item.name}}</div>
              </router-link>
          </swiper-slide>
        </swiper>
        <!-- <swiperBtn :swiperData = 'rzSwiperData' /> -->
      </div>
      </ul>
    </div>
  </div>
</template>
<script>
import swiperBtn from '@/components/swiperBtn.vue' //轮播的翻页 + 左右按钮
import personService from '@/components/personService.vue' //轮播的翻页 + 左右按钮
import {swiperConfig,ajax,reg,ajaxAdd,showToast,isLoginM} from '@/utils/js.js'
import {proCooperationUnit, proEnterpriseWall, proCooperationMsg} from '@/services/api.js'

export default {
  components:{
    swiperBtn,
    personService
  },
  data() {
    return {
		  isLogin: 'false',
      hzSwiperData:{show:false}, //快捷服务-轮播参数
      hzSwiperConfig:'', //快捷服务-轮播配置,
      rzSwiperData:{show:false}, //快捷服务-轮播参数
      rzSwiperConfig:'', //快捷服务-轮播配置,
      imgUrl:this.$store.state.imgUrl,
      dataList:[],
      ruleForm: {
        name: '',
        phone: '',
        companyName: '',
        content:'',
        resource:2,  //1个人合作，2企业合作
      },
      companyRecords: [],
      wallData: [],
    }
  },
  methods:{
    content(){
      var data1 = {
      "cooperationCategary": "1", //1院校合作,2企业合作	
      "cooperationUnit": "",
      "pageNo": 1,
      "pageSize": 10
      }
      ajax(this,proCooperationUnit,data1,res=>{
        this.dataList = res.data.records
      })
      var data2 = {
          "cooperationCategary": "2", //1院校合作,2企业合作	
          "cooperationUnit": "",
          "pageNo": 1,
          "pageSize": 7
      }
      ajax(this,proCooperationUnit,data2,res=>{
        this.companyRecords = res.data.records
      })
      //企业墙
      var dataWall = {
          "pageNo": 1,
          "pageSize": 8,
          
      }
      ajax(this,proEnterpriseWall,dataWall,res=>{
        this.wallData = res.data.records
      })
    },
    submitMsgReq(formName) {
      
      
      var data = {
        "auditOpinion": "",
        "cooperationType": this.ruleForm.resource,	//1个人合作，2企业合作
        "createTime": "",
        "description": this.ruleForm.content,
        "enterpriseName": this.ruleForm.companyName,
        "headPicture": "",
        "name": this.ruleForm.name,
        "phone": this.ruleForm.phone,
        "sex": "",
        "status": "",
        "telentType": "",
        "terminal": "0",
        "topUniversity": "",
        "userName": ""
      }
      console.log(data)
      return
      ajaxAdd( this, proCooperationMsg, data, (res) => {
        this.$message({ message: res.msg, type: 'success' });
        this.resetForm(formName)
      });
    },
    // 合作留言
    submitForm(formName) {
      console.log(this.ruleForm)
      isLoginM(this,()=>{
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.submitMsgReq(formName)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  mounted(){
	  if(this.$store.state.userInfo){
	    this.isLogin='true';
	  }
    this.content()
    let data = {
        view:4,
        prev:'prev1',
        next:'next1',
        show:true,
    }
    swiperConfig(this,data,'hzSwiperConfig','hzSwiperData',index=>{})
    
    let rzData = {
        view:4,
        // prev:'prev1',
        // next:'next1',
        show:true,
        loop:true
    }
    swiperConfig(this,rzData,'rzSwiperConfig','rzSwiperData',()=>{})

    
  },
  computed:{
    rules(){
      let data ={
          name: [
            { required: true, message: this.$t('common.form.input',[this.$t('common.company.name')]), trigger: ['blur', 'change'] },
            { min: 1, max: 100, message: this.$t('common.form.input',[this.$t('common.company.name')]), trigger: ['blur', 'change'] }
          ],
          phone: [
            { required: true, message: this.$t('common.login.enterPhone'), trigger: ['blur', 'change']  },
            { validator:reg.phone, trigger: ['blur', 'change'] }
          ],
          companyName: [
            { required: true, message: this.$t('common.form.input',[this.$t('common.company.companyName')]), trigger: ['blur', 'change'] },
          ],
          content: [
            { required: true, message:this.$t('common.form.input',[this.$t('common.company.feedbackDetail')]) , trigger: ['blur', 'change']}
          ]
        }
        return data
    }
  },
  watch:{
    '$i18n.locale'(){
      this.content()
    },
  },
}
</script>
<style lang="scss">
.cooperation{
  .box{padding:30px 0}
  .h2{line-height:1;padding:10px 0;margin-bottom:26px;}
  .h2 b{border-left:2px solid #0F54BC;padding-left:10px;}
  .h2 .more:hover{color: #0F54BC;}
  .dataList{
    .dd{
      width:290px;margin:0 auto; background-color: #fff; display: block;
      .imgW{
        width:100%;
        height: 226px;
        background-color: #e1e1e1;
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .con>div{padding:0 12px;width: 100%;}
    }
    .dd:hover{background-color: #0F54BC;}
    .dd:hover *{color: #fff !important;}
    .more{
      line-height: 35px;
      border-top:1px solid #ededed;
      color: #777;
    }
    .np{line-height: 20px;height: 40px;margin:5px 0 10px;}
    .ntit{margin-top: 10px;}

    .prev1{left: -50px;}
    .next1{right: -50px;}
  }
  .comapny-box{
    .h2{margin-bottom:0;}
    .left{width:550px;float: left;}
    .news-item{
      line-height: 50px;
      border-bottom: 1px solid #ededed;
      .ntit{width: 410px;}
    }
    .news-item::before{content: '';border-left:5px solid #0F54BC;border-top:3px solid transparent;border-bottom: 3px solid transparent;}
    .news-item:hover .ntit{color: #0F54BC;text-decoration: underline;}
    .right{
      width:590px;
      float: right; 
      .el-input--small .el-input__inner{height: 44px;line-height: 44px;border-radius: 2px;}
      .el-form-item{margin-bottom: 15px;}
      .el-radio__label{font-size: 16px;}
      .el-radio__inner{width:18px;height: 18px;}
      .el-radio__input.is-checked .el-radio__inner{background-color: #fff;border-color: #0F54BC;}
      .el-radio__inner::after{background-color: #0F54BC;width:8px;height:8px;}
      .el-radio__input.is-checked+.el-radio__label{color: #0F54BC;}
      .textarea .el-textarea__inner{height: 116px;}
      .el-form-item__content{margin-left:0 !important;}
      .el-button--primary{background-color: #0F54BC;border-color: #0F54BC;width:90px;height:36px;margin-top:10px;}
    }
  }
  .rzList{
    .dd{
      width:96%;height:80px;float: left;background-color: #fff;
      background-color: #e3eeff;
      img{
        width: 60px;
        height: 60px;
        object-fit: contain;
        margin-left:5px;
      }
      .flex1{margin:0 5px;}
    }
    
  }
}
  
</style>